<!doctype html>

<head>
    <title>Threebox raycast example: highlight cube on mouse hover</title>
    <script include="threebox" src="./static/libs/include-mapboxgl-local.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>
        //mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
        mapboxgl.accessToken =
            'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';

        var origin = [-122.4340, 37.7353, 1000];

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: origin,
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            hash: true
        });


        map.on('style.load', function () {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function (map, mbxContext) {

                    window.threebox = new Threebox(map, mbxContext);
                    threebox.setupDefaultLights();

                    // initialize geometry and material of our cube object
                    var geometry = new THREE.BoxGeometry(2000, 2000, 2000);

                    var redMaterial = new THREE.MeshPhongMaterial({
                        color: 0x660000,
                        side: THREE.DoubleSide
                    });
                    var greenMaterial = new THREE.MeshPhongMaterial({
                        color: 0xaaffaa,
                        side: THREE.DoubleSide
                    });


                    cube = new THREE.Mesh(geometry, redMaterial);
                    cube.userData.name = "Red cube";

                    threebox.addAtCoordinate(
                        cube,
                        origin, {
                            preScale: 1
                        }
                    );

                    var highlighted = [];


                    //add mousing interactions
                    map.on('mousemove', function (e) {

                        // Clear old objects
                        highlighted.forEach(function (h) {
                            h.material = redMaterial;
                        });
                        highlighted.length = 0;


                        // calculate objects intersecting the picking ray
                        var intersects = threebox.queryRenderedFeatures(e.point)

                        // if intersect exists, highlight it
                        if (intersects[0]) {

                            var nearestObject = intersects[0].object;
                            nearestObject.material = greenMaterial;
                            highlighted.push(nearestObject)

                            //trigger repaint to rerender map
                            threebox.update();
                        }
                    });
                },
                render: function (gl, matrix) {
                    threebox.update(true);
                }
            });
        });
    </script>
</body>